<template>
  <div id="resume" style="margin: 20px">
    <div class="info">
      <h2>个人信息</h2>
      <div class="userInfo flexbox">
        <div class="userImg">
          <img
            v-if="personalinfo.userImg"
            :src=" imgHost + personalinfo.userImg"
            class="avatar"
          >
        </div>
        <div class="userForm">
          <div class="flexbox">
            <el-form ref="ruleForm" :rules="rules" label-width="120px">
              <el-form-item label="姓名">
                {{ personalinfo.userName }}
              </el-form-item>
              <el-form-item label="地址">
                {{ personalinfo.address }}
              </el-form-item>
              <el-form-item label="电子邮箱">
                {{ personalinfo.mailbox }}
              </el-form-item>
            </el-form>
            <el-form ref="form" label-width="120px">
              <el-form-item label="生日">
                {{ personalinfo.birthday }}
              </el-form-item>
              <el-form-item label="电话">
                {{ personalinfo.phone }}
              </el-form-item>
              <el-form-item label="职业">
                {{ personalinfo.occupation }}
              </el-form-item>
            </el-form>
          </div>
          <div>
            <el-form ref="form" label-width="120px">
              <el-form-item label="个人介绍">
                {{ personalinfo.introduce }}
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
      <el-link
        class="flexBox userInfoEdit cursor"
        type="primary"
        @click="openUser"
      ><i class="el-icon-circle-plus-outline" /> 编辑</el-link>
    </div>
    <div class="info">
      <h2>社交链接</h2>
      <div class="link j_a_box">
        <div
          v-for="(item, index) in socialLinks"
          :key="index"
          class="link-box flexbox"
        >
          <h2>{{ item.linkName }}</h2>
          <img v-if="item.linkImg" :src="imgHost + item.linkImg">
          <div class="flexbox">链接： {{ item.onlinelink }}</div>
        </div>
      </div>
      <el-link
        class="flexBox userInfoEdit cursor"
        type="primary"
        @click="openSocialLink"
      ><i class="el-icon-circle-plus-outline" /> 编辑</el-link>
    </div>
    <div class="info">
      <h2>技能</h2>
      <div class="skill">
        <div v-if="skill.length === 0" class="flexBox isSkill">
          暂无选择技能
        </div>
        <ul v-else class="skillList j_b_box">
          <li v-for="(item, index) of skill" :key="index" class="j_b_box">
            <span>{{ item.skillName }}</span>
            <el-progress :percentage="item.percentage" :color="customColor" />
          </li>
        </ul>
      </div>
      <el-link
        class="flexBox userInfoEdit cursor"
        type="primary"
        @click="openSkillk"
      ><i class="el-icon-circle-plus-outline" /> 编辑</el-link>
    </div>
    <div class="info">
      <div class="j_b_box">
        <h2>工作经历</h2>
        <el-link
          class="flexBox cursor"
          type="primary"
          @click="openWork"
        ><i class="el-icon-circle-plus-outline" /> 添加</el-link>
      </div>
      <div class="work">
        <div
          v-for="(item, index) in work"
          :key="index"
          class="company-box cursor"
        >
          <div class="company flexbox">
            <p>{{ item.corporateName }}</p>
            <span>{{ item.workingTime }}</span>
          </div>
          <div class="position flexbox">
            <span>{{ item.department }}</span>
            <span />
            <span>{{ item.position }}</span>
          </div>
          <div class="content"><span>内容：</span> {{ item.jobContent }}</div>
          <div class="edit flexbox">
            <el-link
              type="danger"
              class="flexBox cursor"
              @click="handleDel('work', item.id)"
            ><i class="el-icon-delete" /> 删除</el-link>
            <el-link
              type="primary"
              class="flexBox cursor"
              @click="
                workForm = { ...item };
                workMask = true;
              "
            ><i class="el-icon-edit" />编辑</el-link>
          </div>
        </div>
      </div>
    </div>
    <div class="info">
      <div class="j_b_box">
        <h2>项目经历</h2>
        <el-link
          class="flexBox cursor"
          type="primary"
          @click="openProject"
        ><i class="el-icon-circle-plus-outline" /> 添加
        </el-link>
      </div>
      <div class="work">
        <div
          v-for="(item, index) in project"
          :key="index"
          class="company-box project j_b_box"
        >
          <div class="company-left">
            <div class="company projectNme flexbox">
              <p>{{ item.projectName }}</p>
              <span>{{ item.projectTime }}</span>
            </div>
            <div class="position">{{ item.projectRole }}</div>
            <div class="content" style="width: 100%">
              <span>内容：</span> {{ item.projectContent }}
            </div>
            <div class="edit flexbox">
              <el-link
                type="danger"
                class="flexBox cursor"
                @click="handleDel('project', item.id)"
              ><i class="el-icon-delete" /> 删除</el-link>
              <el-link
                type="primary"
                class="flexBox cursor"
                @click="
                  projectForm = { ...item };
                  projectMask = true;
                "
              ><i class="el-icon-edit" />编辑</el-link>
            </div>
          </div>
          <div class="company-right">
            <p>
              <el-link type="primary" :href="item.projectLink">{{
                item.projectLink
              }}</el-link>
            </p>
            <img :src="imgHost + item.projectImg" alt="">
          </div>
        </div>
      </div>
    </div>
    <div class="info">
      <div class="j_b_box">
        <h2>教育经历</h2>
        <el-link
          class="flexBox cursor"
          type="primary"
          @click="openEducation"
        ><i class="el-icon-circle-plus-outline" /> 添加</el-link>
      </div>
      <div class="work">
        <div
          v-for="(item, index) in education"
          :key="index"
          class="company-box cursor"
        >
          <div class="company flexbox">
            <p>{{ item.schoolName }}</p>
            <span>{{ item.time }}</span>
          </div>
          <div class="position flexbox">
            <span>{{ item.major }}</span>
            <span />
            <span>{{ item.education }}</span>
          </div>
          <div class="content"><span>内容：</span> {{ item.content }}</div>
          <div class="edit flexbox">
            <el-link
              type="danger"
              class="flexBox cursor"
              @click="handleDel('education', item.id)"
            ><i class="el-icon-delete" /> 删除</el-link>
            <el-link
              type="primary"
              class="flexBox cursor"
              @click="
                educationForm = { ...item };
                educationMask = true;
              "
            ><i class="el-icon-edit" />编辑</el-link>
          </div>
        </div>
      </div>
    </div>
    <Work
      :dialog-visible="workMask"
      :form="workForm"
      @handleClose="handleWorkClose"
      @handlQuery="getResumeInfo()"
    />
    <UserInfo
      :dialog-visible="userMask"
      :form="userForm"
      @handleClose="handleWorkClose"
      @handlQuery="
        getResumeInfo();
        handleWorkClose();
      "
    />
    <SocialLinks
      :dialog-visible="socialLinMask"
      :form="socialLinForm"
      @handleClose="handleWorkClose"
      @handlQuery="
        getResumeInfo();
        handleWorkClose();
      "
    />
    <Skill
      :dialog-visible="skillkMask"
      :form="skillForm"
      @handleClose="handleWorkClose"
      @handlQuery="
        getResumeInfo();
        handleWorkClose();
      "
    />
    <Project
      :dialog-visible="projectMask"
      :form="projectForm"
      @handleClose="handleWorkClose"
      @handlQuery="getResumeInfo()"
    />
    <Education
      :dialog-visible="educationMask"
      :form="educationForm"
      @handleClose="handleWorkClose"
      @handlQuery="getResumeInfo()"
    />
  </div>
</template>

<script>
import { upload } from '@/fs'
import { getResumeInfo, del } from '@/api/resume'
const UserInfo = () => import('./components/userInfo')
const SocialLinks = () => import('./components/socialLinks')
const Skill = () => import('./components/skill')
const Work = () => import('./components/work')
const Project = () => import('./components/project')
const Education = () => import('./components/education')
export default {
  name: 'ResumeAdmin',
  components: { Work, UserInfo, SocialLinks, Skill, Project, Education },
  data() {
    return {
      personalinfo: {},
      ruleForm: {},
      rules: {},
      // 技能列表
      socialLinks: [
        {
          linkName: 'QQ',
          linkImg: '',
          onlinelink: ''
        },
        {
          linkName: '微信',
          linkImg: '',
          onlinelink: ''
        },
        {
          linkName: 'github',
          linkImg: '',
          onlinelink: ''
        },
        {
          linkName: '微博',
          linkImg: '',
          onlinelink: ''
        }
      ],
      // 进度条颜色
      customColor: '#409eff',
      work: [],
      skill: [],
      options: [],
      project: [],
      education: [],
      skillValue: '',
      userMask: false, // 用户弹窗
      userForm: {},
      socialLinMask: false, // 社交链接弹窗
      socialLinForm: [],
      skillkMask: false, // 技能弹窗
      skillForm: [],
      projectMask: false, // 项目经验弹窗
      projectForm: {},
      educationMask: false, // 教育经历弹窗
      educationForm: {},
      workMask: false, // 工作经历弹窗控制
      workForm: {} // 工作经历表单
    }
  },
  created() {
    this.getResumeInfo()
  },
  methods: {
    // 技能加减
    increase(item) {
      item.percentage += 10
      if (item.percentage > 100) {
        item.percentage = 100
      }
      this.$forceUpdate()
    },
    decrease(item) {
      item.percentage -= 10
      if (item.percentage < 0) {
        item.percentage = 0
      }
      this.$forceUpdate()
    },
    // 技能选择
    skillSelect(val) {
      const skill = []
      val.forEach((item) => {
        skill.push({
          skillName: item,
          percentage: 0
        })
      })
      this.skill = skill
    },
    // 用户弹窗
    openUser() {
      this.userMask = true
      this.userForm = { ...this.personalinfo }
    },
    // 社交链接
    openSocialLink() {
      this.socialLinForm = JSON.parse(JSON.stringify(this.socialLinks))
      this.socialLinMask = true
    },
    // 技能弹窗
    openSkillk() {
      this.skillForm = JSON.parse(JSON.stringify(this.skill))
      this.skillkMask = true
    },
    // 工作经历弹窗打开
    openWork() {
      this.workMask = true
    },
    // 项目经验弹窗
    openProject() {
      this.projectMask = true
    },
    // 教育经历弹窗
    openEducation() {
      this.educationMask = true
    },
    // 弹窗取消
    handleWorkClose() {
      this.userMask = false
      this.workMask = false
      this.socialLinMask = false
      this.skillkMask = false // 技能弹窗
      this.skillForm = []
      this.projectMask = false // 项目经验弹窗
      this.projectForm = {}
      this.educationMask = false // 教育经历弹窗
      this.educationForm = {}
      this.userForm = {}
      this.workForm = {}
      this.socialLinForm = []
    },
    getResumeInfo() {
      getResumeInfo({ userId: 1 }).then((res) => {
        res = res.data
        this.personalinfo = res.personalinfo
        this.socialLinks = res.socialLinks
        this.skill = res.skill
        this.project = res.project
        this.work = res.work
        this.education = res.education
      })
    },
    handleDel(enumeration, id) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          del({ enumeration, id }).then((res) => {
            if (res.code === 200) {
              this.$message.success(res.msg)
            } else {
              this.$message.error(res.msg)
            }
            this.getResumeInfo()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 图片上传
    uploadImage({ file }) {
      upload(file).then((res) => {
        this.personalinfo.userImg = res.code
      })
    }
  }
}
</script>

<style lang="less" scoped>
#resume {
  font-family: "regularScript";
  .info {
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2);
    background: #fff;
    padding: 10px 20px;
  }
  .info {
    margin-bottom: 20px;
    position: relative;
    .userInfo {
      align-items: center;
      .userImg {
        width: 20%;
      }
      .userForm {
        width: 80%;
        .el-form {
          flex: 1;
          .el-form-item {
            display: flex;
          }
        }
       /deep/ .el-form-item__content {
         flex: 1 !important;
        }
      }
    }
    .userInfoEdit {
      position: absolute;
      right: 20px;
      top: 20px;
    }
    .link-box {
      text-align: center;
      flex-direction: column;
      align-items: center;
      padding: 0 0 20px;
      h3 {
        margin: 0;
      }
      img {
        width: 150px;
        height: 150px;
        margin-bottom: 20px;
        border-radius: 50%;
      }
    }
    .skill {
      .isSkill {
        height: 100px;
        justify-content: center;
        font-size: 14px;
        font-weight: 400;
        margin: 0 auto;
        color: rgb(151, 151, 151);
      }
      .skillList {
        padding: 10px;
        flex-wrap: wrap;
        li {
          width: 30%;
          padding: 10px 0;
          span {
            width: 100px;
          }
          .el-progress {
            width: 250px;
          }
        }
      }
    }
    .work {
      .company-box {
        padding: 20px 30px;
        position: relative;
        &:hover {
          background: #f2f5f9;
          .edit {
            display: flex;
          }
        }
        .company-right,
        .company-left {
          flex: 1;
          img {
            width: 50%;
            margin: 10px 0;
          }
        }
        .company {
          margin-bottom: 20px;
          align-items: flex-end;
          p {
            margin-right: 50px;
            font-weight: 600;
            font-size: 18px;
          }
          span {
            color: #9fa3b0;
            font-size: 14px;
          }
        }
        .position {
          margin: 10px 0;
          span {
            margin-right: 15px;
            &:nth-child(2) {
              color: #9fa3b0;
              border-left: 1px solid #9fa3b0;
              margin: 3px 0;
              margin-right: 15px;
            }
          }
        }
        .content {
          margin-top: 20px;
          width: 60%;
          color: #61687c;
          font-size: 16px;
          // letter-spacing: 2px;
          line-height: 20px;
          span {
            color: #61687c;
            font-weight: 600;
          }
        }
        .edit {
          position: absolute;
          right: 10px;
          top: 10px;
          display: none;
          .el-link {
            margin: 0 10px;
            font-size: 14px;
          }
        }
      }
    }
  }
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
  border: 1px dashed #d9d9d9;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
